<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染.html</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
    条件渲染
        v-if
            写法
                v-if="表达式"
                v-else-if="表达式"
                v-else="表达式"
            适用于:切换频率较低的场景
            特点:不展示DOM元素直接被移除
            注意:v-if可以和v-else-if、v-else一起使用,但要求结构上保证唯一。

         v-show
            写法:v-show="表达式"
            适用于:切换频率较高的场景
            特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉

         使用v-if时元素可能无法获取到,而v-show一定可以获取到

-->
    <!--  准备好一个容器  -->
    <div id="root">
        <h2>当前的n值是:{{n}}</h2>
        <button @click="n++">点我n+1</button>

        <div v-show="n === 1">Angular</div>
        <div v-show="n === 2">React</div>
        <div v-show="n === 3">Vue</div>

        <div v-if="n === 1">Angular</div>
        <div v-else-if="n === 1">React</div>
        <div v-if="n === 3">Vue</div>
        <div v-else>哈哈</div>

        <!--        使用v-show做条件渲染-->
        <!--        <h2 v-show="a">欢迎来到{{name}}</h2>-->
        <!--        <h2 v-show="false">欢迎来到{{name}}</h2>-->
        <!--        <h2 v-show="1 === 1">欢迎来到{{name}}</h2>-->

        <!--        使用v-if做条件渲染-->
        <!--        <h2 v-if="a">欢迎来到{{name}}</h2>-->
        <!--        <h2 v-if="1 === 1">欢迎来到{{name}}</h2>-->

        <!-- div会破坏结构(在开发者工具检查源码       -->
        <div>
            <h2>你好</h2>
            <h2>尚硅谷</h2>
            <h2>北京</h2>
        </div>
        <!-- template不会破坏结构(在开发者工具检查源码       -->
        <template v-if="n === 1">
            <h2>你好</h2>
            <h2>尚硅谷</h2>
            <h2>北京</h2>
        </template>
    </div>
</body>

<script type="text/javascript">
    const vm = new Vue({
        el: "#root",
        data: {
            name: "尚硅谷",
            a: false,
            n: 0
        }
    })
</script>
</html>